function d2r(d) {
	return d * Math.PI/180
}

function r2d(r) {
	r * 180 / Math.PI
}

function posEnc(seqLen, d, n=10000) {
	let pe = Array.from({ length: seqLen }, () => Array(d).fill(0))
	
	for(var k = 0; k < seqLen; k++) {
		for(var i = 0; i < Math.floor(d/2); i++) {
            var denominator = Math.pow(n, 2*i/d)
            pe[k][2*i] = Math.sin(k/denominator)
            pe[k][2*i+1] = Math.cos(k/denominator)
			
			//console.log(`${k} ${2*i} ${Math.sin(k/denominator)}`)
			//console.log(`${k} ${2*i+1} ${Math.cos(k/denominator)}`)
		}
	}
	
	return pe
}

const layout = { margin: {t: 10, l: 10, r: 10, b: 10} }

var pe = posEnc(100, 128)
console.log(pe)
console.log([pe[0], pe[1]])


var figure1 = $('<div id="figure1"/>').css('height', '500px').appendTo('#canvas')[0]
Plotly.newPlot(figure1, [{z: pe, type: 'heatmap', zmin:-1, zmax: 1 }], layout)


var figure2 = $('<div id="figure2"/>').css('height', '50px').appendTo('#canvas')[0]
Plotly.newPlot(figure2, [{z: [pe[0]], type: 'heatmap', zmin:-1, zmax: 1 }], layout)

var figure3 = $('<div id="figure3"/>').css('height', '50px').appendTo('#canvas')[0]
Plotly.newPlot(figure3, [{z: [pe[1]], type: 'heatmap', zmin:-1, zmax: 1 }], layout)

var figure4 = $('<div id="figure4"/>').css('height', '50px').appendTo('#canvas')[0]
Plotly.newPlot(figure4, [{z: [pe[2]], type: 'heatmap', zmin:-1, zmax: 1 }], layout)

var figure5 = $('<div id="figure5"/>').css('height', '50px').appendTo('#canvas')[0]
Plotly.newPlot(figure5, [{z: [pe[3]], type: 'heatmap', zmin:-1, zmax: 1 }], layout)

var figure6 = $('<div id="figure6"/>').css('height', '50px').appendTo('#canvas')[0]
Plotly.newPlot(figure6, [{z: [pe[10]], type: 'heatmap', zmin:-1, zmax: 1 }], layout)

var figure7 = $('<div id="figure7"/>').css('height', '50px').appendTo('#canvas')[0]
Plotly.newPlot(figure7, [{z: [pe[50]], type: 'heatmap', zmin:-1, zmax: 1 }], layout)





